import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 全局状态
    isLoading: false,
    userInfo: null,
    // 产品数据
    products: [],
    // 解决方案数据
    solutions: [],
    // 新闻数据
    news: []
  },
  mutations: {
    SET_LOADING(state, status) {
      state.isLoading = status
    },
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo
    },
    SET_PRODUCTS(state, products) {
      state.products = products
    },
    SET_SOLUTIONS(state, solutions) {
      state.solutions = solutions
    },
    SET_NEWS(state, news) {
      state.news = news
    }
  },
  actions: {
    // 异步操作
    async fetchProducts({ commit }) {
      commit('SET_LOADING', true)
      try {
        // 模拟API调用
        const products = [
          { id: 1, name: '固定网络摄像机', category: '前端产品', image: '/images/camera1.jpg' },
          { id: 2, name: '球型网络摄像机', category: '前端产品', image: '/images/camera2.jpg' },
          { id: 3, name: '云台网络摄像机', category: '前端产品', image: '/images/camera3.jpg' }
        ]
        commit('SET_PRODUCTS', products)
      } catch (error) {
        console.error('获取产品数据失败:', error)
      } finally {
        commit('SET_LOADING', false)
      }
    }
  },
  getters: {
    // 计算属性
    isLoading: state => state.isLoading,
    userInfo: state => state.userInfo,
    products: state => state.products,
    solutions: state => state.solutions,
    news: state => state.news
  }
})

